/**
 * @fileoverview Library for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.ui.Library autoescape="strict"}


/**
 * File library template.
 */
{template .fileLibrary}
  {@param prefix: string}
  {@param files: ?}
  {@param? opt_media_type: string}

  <div id="{$prefix}chrome" class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">

    <div class="mdl-tabs__tab-bar">
      <a href="#{$prefix}upload" id="{$prefix}upload_tab" class="mdl-tabs__tab{if not $opt_media_type} is-active{/if}">
        {msg desc=""}Upload{/msg}
      </a>
      <a href="#{$prefix}images" id="{$prefix}images_tab" class="mdl-tabs__tab{if $opt_media_type == 'image'} is-active{/if}">
        {msg desc=""}Images{/msg}
      </a>
      <a href="#{$prefix}audio" id="{$prefix}audio_tab" class="mdl-tabs__tab{if $opt_media_type == 'audio'} is-active{/if}">
        {msg desc=""}Audio{/msg}
      </a>
      <a href="#{$prefix}all" id="{$prefix}all_tab" class="mdl-tabs__tab"{if not $opt_media_type == 'image' and not $opt_media_type == 'audio'} is-active{/if}>
        {msg desc=""}All{/msg}
      </a>
      <a href="#{$prefix}search" id="{$prefix}search_tab" class="mdl-tabs__tab">
        {msg desc=""}Search{/msg}
      </a>
    </div>

    <div class="mdl-tabs__panel{if not $opt_media_type} is-active{/if}" id="{$prefix}upload">
      {call .mediaUpload data="all" /}
    </div>

    <div class="mdl-tabs__panel{if $opt_media_type == 'image'} is-active{/if}" id="{$prefix}images">
      {call .imageFiles data="all" /}
    </div>

    <div class="mdl-tabs__panel{if $opt_media_type == 'audio'} is-active{/if}" id="{$prefix}audio">
      {call .audioFiles data="all" /}
    </div>

    <div class="mdl-tabs__panel{if not $opt_media_type == 'image' and not $opt_media_type == 'audio'} is-active{/if}" id="{$prefix}all">
      {call .allFiles data="all" /}
    </div>

    <div class="mdl-tabs__panel" id="{$prefix}search">
      {call .searchFiles data="all" /}
    </div>

  </div>

{/template}


/**
 * Media file upload template.
 */
{template .mediaUpload}
  {@param prefix: string}

  <div id="{$prefix}add-file" class="drop-zone">
    <div id="{$prefix}add-file-text">
      <i class="material-icons">cloud</i>
      <input id="{$prefix}upload" type="file" name="fileupload" style="visibility: hidden;" />
      <button id="{$prefix}upload-button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
        {msg desc=""}Upload file{/msg}
      </button>
      <i class="material-icons">file_upload</i>
      {msg desc=""}Drop file here or click to select{/msg}
    </div>
  </div>

{/template}


/**
 * Image library files
 */
{template .imageFiles}
  {@param prefix: string}
  {@param files: ?}

  {foreach $file in keys($files)}
    {if $files[$file]['media_type'] == 'image'}
      <div class="{$prefix}image-entry"
        data-file-name="{$file}"
        data-file-action="insertMacro">
        <img src="{$files[$file]['content']}" width="100" height="100"
          data-file-name="{$file}" data-file-action="insertMacro">
      </div>
    {/if}
  {ifempty}
    <p>
      {msg desc=""}Please click on the upload tab to upload an image file.{/msg}
    </p>
  {/foreach}

{/template}


/**
 * Audio library files
 */
{template .audioFiles}
  {@param prefix: string}
  {@param files: ?}

  {foreach $file in keys($files)}
    {if $files[$file]['media_type'] == 'audio'}
      <div class="{$prefix}audio-entry"
        data-file-action="insertMacro"
        data-file-name="{$file}">
        <i class="material-icons"
          data-file-name="{$file}" data-file-action="insertMacro">
          audiotrack
        </i>{$file}
        <audio controls src="{$files[$file]['content']}"></audio>
      </div>
    {/if}
  {ifempty}
    <p>
      {msg desc=""}Please click on the upload tab to upload an audio file.{/msg}
    </p>
  {/foreach}

{/template}


/**
 * All library files
 */
{template .allFiles}
  {@param prefix: string}
  {@param files: ?}

  {foreach $file in keys($files)}
    <div class="{$prefix}all-entry"
      data-file-name="{$file}"
      data-file-action="insertMacro">
      <i class="material-icons"
        data-file-name="{$file}" data-file-action="insertMacro">
        insert_drive_file
      </i>{$file}
    </div>
  {ifempty}
    <p>
      {msg desc=""}Please click on the upload tab to upload a file.{/msg}
    </p>
  {/foreach}

{/template}


/**
 * Search for image files
 */
{template .searchFiles}
  {@param prefix: string}

  <div id="{$prefix}search-file">

    <div>
      <img src="../images/logos/googlelogo_color_52x20dp.png">
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="{$prefix}search-term">
        <label class="mdl-textfield__label" for="{$prefix}search-term">
          {msg desc=""}Search ...{/msg}
        </label>
      </div>
      <button id="{$prefix}search-button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
        <i class="material-icons">search</i> {msg desc=""}Search{/msg}
      </button>
    </div>

    <div id="{$prefix}search-drop" class="drop-zone">
      <i class="material-icons">file_upload</i>
      {msg desc=""}Drop image here{/msg}
    </div>

    <div id="{$prefix}search-error">
      {msg desc=""}It seems there is an problem.{/msg}<br>
      {msg desc=""}
        Please download the image and upload the downloaded image instead.
      {/msg}
      {msg desc=""}Thanks.{/msg}
    </div>

    <p id="{$prefix}search-note">
      {msg desc=""}Results shown are labeled for commercial reuse with modification.{/msg}
      <a href="https://support.google.com/drive/?p=docs_image_search" target="_blank">
        {msg desc=""}Learn more{/msg}
      </a>
    </p>

  </div>

{/template}
